<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            background-color: #f6f7fa;
        }

        .container {
            width: 1020px;
            margin: 20px auto;
            /* border: 1px solid red; */
        }

        .main-title {
            text-align: center;
            margin-bottom: 20px;
        }

        .news-box .list .item {
            display: flex;
            height:150px;
            margin-top:20px;
            background:white;
        }

        .news-box .list .item .img > img{
            width:150px;
            height: 150px;
        }

        .news-box .list .item  .info{
            width:850px;
            height: 150px;
            border:1px solid #ccc;
            box-sizing: border-box;
            padding-left: 20px;
        }
        .news-box .list .item  .info p{
            margin-top:15px;
        }
        .news-box .list .item  .info .desc{
            white-space:nowrap ;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .page{
            margin-top:18px;
        }
        .page input{
            width:30px;
            height: 30px;
            border:0;
            background:green;
            margin-right: 20px;
        }
        .page .active{
            background:orange;
        }
    </style>
</head>

<body>
    <!-- https://oa.itany.com/ItanyManager/web/findInformation?page=1&rows=4 -->

    <div class="container">
        <h4 class="main-title">新闻动态</h4>
        <div class="news-box">
            <div class="list">

                <!-- <div class="item">
                    <div class="img">
                        <img src="img/01.png" alt="">
                    </div>
                    <div class="info">
                        <p class="title">哈哈哈</p>
                        <p class="desc">大叔大叔大叔多撒大所大所大撒大所大所大所dx大是大非所大所多所多所大所大所大所大所大所大所大所大所大所大所阿斯顿撒大大所大所大ssss</p>
                        <p class="time">2022-10-2</p>
                    </div>
                </div> -->

            </div>
            <div class="page">
                <!-- <input type="button" value="1">
                <input type="button" value="2">
                <input type="button" value="3">
                <input type="button" value="4"> -->
            </div>
        </div>
    </div>

    <script>

        // https://oa.itany.com/ItanyManager/web/findInformation?page=1&rows=4


        //渲染新闻数据
        function initNews(news=[]){
            let str="";
            news.forEach(function(items,index){
                // console.log(items);
                str+=`
                <div class="item">
                    <div class="img">
                        <img src="${items.img}" alt="">
                    </div>
                    <div class="info">
                        <p class="title">${items.title}</p>
                        <p class="desc">${items.titletext}</p>
                        <p class="time">${items.createDate}</p>
                    </div>
                </div> 
                
                `;
            });

            let boxDom=document.querySelector(".list");
            boxDom.innerHTML=str;

        }

        //渲染分页器
        function initPage(options={}){
            let opt=Object.assign({
                el:null,
                pageNums:1,//页码总数
                currentPage:1,//3
                callback:function(){}
            },options);

           if(!opt.el){//如果el没有关联页面的元素
                return;//停掉
           }
           let pageDom=document.querySelector(opt.el);
           pageDom.innerHTML="";

           //循环创建4个按钮
           for(let i=1;i<=opt.pageNums;i++){
                let btn=document.createElement("input");
                btn.type="button";
                btn.value=i;
                btn.className=(i==opt.currentPage?"active":"");
                btn.onclick=function(){
                    opt.callback(i);//3
                };
                pageDom.appendChild(btn);
           }


        }

        function loadData(page=1){
            axios({
                url:"https://oa.itany.com/ItanyManager/web/findInformation",
                method:"get",
                params:{
                    page:page,
                    rows:4
                }
            }).then(function(res){
                // console.log(res);
                initNews(res.data.data.rows);//4条
                initPage({
                    el:".page",
                    pageNums:Math.ceil(res.data.data.total/4),//根据total的值算总页数
                    currentPage:page,//3
                    callback:loadData
                });
            }); 
        }
        loadData();
    </script>
</body>

</html>